<template>
  <div class="City">
    <van-index-bar :sticky="false" highlight-color="#fb6463" :index-list="FirstPin">
      <van-index-anchor v-for="(item,index) in cities" :key="index" :index="index">
        {{index}}
        <van-cell
          v-for="(citem,cindex) in cities[index]"
          :key="cindex"
          :title="citem.nm"
          @click="GetCityId(citem.id,citem.nm)"
        />
      </van-index-anchor>
    </van-index-bar>
  </div>
</template>
<script>
export default {
  name: "City",
  data() {
    return {
      FirstPin: [
        "A", 
        "B",
        "C",
        "D",
        "E",
        "F",
        "G",
        "H",
        "J",
        "K",
        "L",
        "M",
        "N",
        "P",
        "Q",
        "R",
        "S",
        "T",
        "W",
        "X",
        "Y",
        "Z"
      ],
      cities: {},
      search: ""
    };
  },
  created() {
    this.GetCity();
  },
  methods: {
    GetCity() {
      this.axios({
        url: "cities.json"
      })
        .then(res => {
          var cities = res.data.cts;
          let cityName = {};
          this.FirstPin.forEach(item => {
            cityName[item] = [];
            cities.forEach(el => {
              let first = el.py.substring(0, 1).toUpperCase();
              if (first == item) {
                cityName[item].push(el);
              }
            });
          });
          this.$nextTick(() => {
            this.cities = cityName;
          });
        })
        .catch(err => {
          console.log(err);
        });
    },
    GetCityId(CityID, City) {
      let historyCity = {
        cityid: CityID,
        cityname: City,
        selectci: true
      };
      localStorage.setItem("historyCity", JSON.stringify(historyCity));
      this.$router.push({ name: "index_hot" });
    }
  }
};
</script>
<style lang="less" scoped>
</style>